<div data-ignore-for-autoscroll="true" class="max-w-3xl w-full mx-auto">
  <div class="relative px-2 md:px-1">
    <fieldset
      [matTooltip]="!modelId() ? ('PAC.ChatBI.SelectSemanticModel' | translate: {Default: 'Select Semantic Model'}) :
        !cube() ? ('PAC.ChatBI.SelectCube' | translate: {Default: 'Select a cube firstly!'}) : null"
      matTooltipPosition="above"
      class="relative flex flex-col gap-2 px-2 py-2 lg:px-4 border border-gray-300 rounded-2xl shadow shadow-slate-200
        bg-white
        dark:bg-neutral-900 dark:border-neutral-700"
    >
      <div class="flex items-center flex-grow">
        <button class="p-1 rounded-lg hover:bg-black/5 dark:hover:bg-white/10"
          [matTooltip]="'Copilot.NewChat' | translate: {Default: 'New chat'}"
          [cdkMenuTriggerFor]="menu"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24" class="icon-xl-heavy">
            <path d="M15.673 3.913a3.121 3.121 0 1 1 4.414 4.414l-5.937 5.937a5 5 0 0 1-2.828 1.415l-2.18.31a1 1 0 0 1-1.132-1.13l.311-2.18A5 5 0 0 1 9.736 9.85zm3 1.414a1.12 1.12 0 0 0-1.586 0l-5.937 5.937a3 3 0 0 0-.849 1.697l-.123.86.86-.122a3 3 0 0 0 1.698-.849l5.937-5.937a1.12 1.12 0 0 0 0-1.586M11 4A1 1 0 0 1 10 5c-.998 0-1.702.008-2.253.06-.54.052-.862.141-1.109.267a3 3 0 0 0-1.311 1.311c-.134.263-.226.611-.276 1.216C5.001 8.471 5 9.264 5 10.4v3.2c0 1.137 0 1.929.051 2.546.05.605.142.953.276 1.216a3 3 0 0 0 1.311 1.311c.263.134.611.226 1.216.276.617.05 1.41.051 2.546.051h3.2c1.137 0 1.929 0 2.546-.051.605-.05.953-.142 1.216-.276a3 3 0 0 0 1.311-1.311c.126-.247.215-.569.266-1.108.053-.552.06-1.256.06-2.255a1 1 0 1 1 2 .002c0 .978-.006 1.78-.069 2.442-.064.673-.192 1.27-.475 1.827a5 5 0 0 1-2.185 2.185c-.592.302-1.232.428-1.961.487C15.6 21 14.727 21 13.643 21h-3.286c-1.084 0-1.958 0-2.666-.058-.728-.06-1.369-.185-1.96-.487a5 5 0 0 1-2.186-2.185c-.302-.592-.428-1.233-.487-1.961C3 15.6 3 14.727 3 13.643v-3.286c0-1.084 0-1.958.058-2.666.06-.729.185-1.369.487-1.961A5 5 0 0 1 5.73 3.545c.556-.284 1.154-.411 1.827-.475C8.22 3.007 9.021 3 10 3A1 1 0 0 1 11 4"></path>
          </svg>
        </button>
        <div class="flex items-center flex-grow overflow-x-hidden">

          <input #userInput matInput class="ngm-colpilot__input w-full px-1.5 z-10 resize-none overflow-visible outline-none"
            [ngClass]="{disabled: answering() ||!cube()}"
            id="userInput" onInput="this.parentNode.dataset.replicatedValue = this.value"
            [placeholder]="'PAC.ChatBI.InputPlaceholder' | translate: {Default: 'Ask a question about the dataset, press Enter to send'} "
            [(ngModel)]="prompt"
            [disabled]="answering() || !cube()"
            (keydown)="triggerFun($event, autoPrompts)"

            [matAutocomplete]="autoPrompts"
            matAutocompletePosition="above"
          >

          <mat-autocomplete #autoPrompts="matAutocomplete" class="ngm-copilot-chat__autocomplete-panel ngm-autocomplete-panel ngm-density__cosy"
              autoActiveFirstOption
              hideSingleSelectionIndicator
              (opened)="suggestionsOpened$.next(true)"
              (closed)="suggestionsOpened$.next(false)"
          >
            @for (command of prompts();  track command.prompt) {
              <mat-option [value]="'/'+command.name+' '+(command.example || '')" [title]="command.description">
                  <span class="ngm-copilot-chat__command-tag text-xs font-medium me-2 px-1 mr-1 rounded"
                  >/{{command.name}}</span>
              @if (command.alias) {
                  <span class="ngm-copilot-chat__command-tag text-xs font-medium me-2 px-1 mr-1 rounded"
                  >/{{command.alias}}</span>
              }
                <span class="ml-auto opacity-50">{{command.description}}</span>
              </mat-option>
            }
          </mat-autocomplete>
          
          <div class="grid grid-flow-col items-center">
            @if (answering()) {
              <button type="button" class="rounded-full md:bottom-3 md:right-3 right-2 border-solid p-1 hover:opacity-60 text-white bg-black dark:bg-white dark:text-black" aria-label="停止生成"
                  (click)="stopGenerating()">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="icon-lg"><rect width="10" height="10" x="7" y="7" fill="currentColor" rx="1.25"></rect></svg>
              </button>
            } @else {
              <button type="button" class="rounded-full md:bottom-3 md:right-3 right-2 border-solid p-1 bg-black disabled:opacity-10 disabled:text-gray-400 enabled:bg-black text-white dark:border-white dark:bg-white bottom-1.5 transition-colors
                  hover:opacity-60" data-testid="send-button"
                  [disabled]="!prompt() || answering() || !cube()"
                  (click)="ask()"
              >
                  <span class="" data-state="closed">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="text-white dark:text-black">
                      <path d="M7 11L12 6L17 11M12 18V7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  </span>
              </button>
            }
          </div>
        </div>
      </div>
    </fieldset>

    @if (!copilotEnabled()) {
      <div class="absolute top-0 left-0 w-full h-full z-10 flex justify-center items-center rounded-2xl shadow
        bg-white shadow-slate-200 dark:bg-neutral-900 dark:border-neutral-700">
        <button mat-stroked-button (click)="navigateToConfig()">
          <div class="flex items-center">
              {{ 'Copilot.EnableCopilot' | translate: {Default: 'Enable Copilot'} }}
              <mat-icon fontSet="material-icons-outlined" displayDensity="cosy">arrow_forward</mat-icon>
          </div>
        </button>
      </div>
    }
  </div>
</div>

<ng-template #menu>
  <div class="ngm-chatbi__conversations-menu" cdkMenu>
    @for (item of conversations(); track item.key) {
      <button
        cdkMenuItemCheckbox
        class="ngm-chatbi__conversations-menu-item w-full group"
        [cdkMenuItemChecked]="item.key === conversation()?.key"
        (click)="setConversation(item.key)"
        >
        <div class="flex justify-start items-center text-left min-w-[100px] max-w-[600px] overflow-hidden text-ellipsis">
          @if (conversations().length > 1) {
            <mat-icon class="cursor-pointer mr-2 rounded-full opacity-10 group-hover:opacity-100 hover:bg-neutral-300 dark:hover:bg-neutral-600"
              ngmAppearance="danger" displayDensity="cosy"
              (click)="deleteConversation($event, item.key)"
            >close</mat-icon>
          }
          <span class="flex-1 text-ellipsis overflow-hidden"
            [title]="item.name">{{item.name || ('PAC.ChatBI.Empty' | translate: {Default: 'Empty'}) }}</span>
        </div>
      </button>
    }
    <hr />

    <button cdkMenuItem color="primary" (click)="newChat()">
      <mat-icon>add_comment</mat-icon>
      {{ 'PAC.ChatBI.NewConversation' | translate: {Default: 'New Conversaton'} }}
     </button>
  </div>
</ng-template>